<template>
    <div class="page-bg">
        <div class="header">
            <div class="logo">
                <h1>实验项目安全风险评估系统</h1>
                <p>Experimental project safety risk assessment system</p>
            </div>
            <div class="userInfo">
                <i class="el-icon-s-custom"></i>
                <span class="marginR-1">用户名</span>
                <span class="marginR-1">测试账号</span>
                <span class="quit-btn">退出</span>
            </div>
        </div>
        <div class="content-wrapper">
            <div class="wrap-list">
                <div class="wrap-box">
                    <div class="items">
                        <div class="title">
                            <img src="../assets/images/home-1.png" alt="">
                            <span class="marginL-1 txt">实验室总数</span>
                        </div>
                        <div ref="chartRef1" style="width: 100%;height:180px;"></div>
                    </div>
                    <div class="items">
                        <div class="title">
                            <img src="../assets/images/home-2.png" alt="">
                            <span class="marginL-1 txt">实验项目总数</span>
                        </div>
                        <div ref="chartRef2" style="width: 100%;height:180px;"></div>
                    </div>
                </div>
                <div class="wrap-box">
                    <div class="items">
                        <div class="title">
                            <img src="../assets/images/home-3.png" alt="">
                            <span class="marginL-1 txt">实验室待整改</span>
                        </div>
                        <div ref="chartRef3" style="width: 100%;height:180px;"></div>
                    </div>
                    <div class="items">
                        <div class="title">
                            <img src="../assets/images/home-4.png" alt="">
                            <span class="marginL-1 txt">人员考试情况</span>
                        </div>
                        <div ref="chartRef4" style="width: 100%;height:180px;"></div>
                    </div>
                </div>
                <div class="wrap-sy">
                    <div class="content marginB-2">
                        <div class="box trans-bg1">
                            <div class="pic pic-bg1">
                                <img src="../assets/images/pro-1.png" alt="">
                            </div>
                            <div class="t-info paddingT-4 paddingL-2">
                                <h1 class="textwhite fontSize20 marginB-1">数据管理系统</h1>
                                <img class="marginB-1" src="../assets/images/line.png" alt="">
                                <span class="textwhite">点击进入系统</span>
                            </div>
                        </div>
                    </div>
                    <div class="content marginB-2">
                        <div class="box trans-bg2">
                            <div class="pic pic-bg2">
                                <img src="../assets/images/pro-2.png" alt="">
                            </div>
                            <div class="t-info paddingT-4 paddingL-2">
                                <h1 class="textwhite fontSize20 marginB-1">数据管理系统</h1>
                                <img class="marginB-1" src="../assets/images/line.png" alt="">
                                <span class="textwhite">点击进入系统</span>
                            </div>
                        </div>
                    </div>
                    <div class="content marginB-2">
                        <div class="box trans-bg3">
                            <div class="pic pic-bg3">
                                <img src="../assets/images/pro-3.png" alt="">
                            </div>
                            <div class="t-info paddingT-4 paddingL-2">
                                <h1 class="textwhite fontSize20 marginB-1">数据管理系统</h1>
                                <img class="marginB-1" src="../assets/images/line.png" alt="">
                                <span class="textwhite">点击进入系统</span>
                            </div>
                        </div>
                    </div>
                    <div class="content marginB-2">
                        <div class="box trans-bg4">
                            <div class="pic pic-bg4">
                                <img src="../assets/images/pro-4.png" alt="">
                            </div>
                            <div class="t-info paddingT-4 paddingL-2">
                                <h1 class="textwhite fontSize20 marginB-1">数据管理系统</h1>
                                <img class="marginB-1" src="../assets/images/line.png" alt="">
                                <span class="textwhite">点击进入系统</span>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="box trans-bg5">
                            <div class="pic pic-bg5">
                                <img src="../assets/images/pro-5.png" alt="">
                            </div>
                            <div class="t-info paddingT-4 paddingL-2">
                                <h1 class="textwhite fontSize20 marginB-1">数据管理系统</h1>
                                <img class="marginB-1" src="../assets/images/line.png" alt="">
                                <span class="textwhite">点击进入系统</span>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="box trans-bg6">
                            <div class="pic pic-bg6">
                                <img src="../assets/images/pro-6.png" alt="">
                            </div>
                            <div class="t-info paddingT-4 paddingL-2">
                                <h1 class="textwhite fontSize20 marginB-1">数据管理系统</h1>
                                <img class="marginB-1" src="../assets/images/line.png" alt="">
                                <span class="textwhite">点击进入系统</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wrap-list marginT-2">
                <div class="comon-box">
                    <div class="t">
                        <img src="../assets/images/title-icon.png" alt="">
                        <span class="marginL-1">待我办</span>
                    </div>
                    <div class="">
                        <ul class="tab-count marginT-1 over">
                            <li class="active">实验室安全</li>
                            <li>实验室报平安</li>
                        </ul>
                        <div class="">
                            <el-table
                                :data="tableData"
                                style="width: 100%">
                                <el-table-column
                                    prop="name"
                                    label="姓名"
                                    width="180">
                                </el-table-column>
                                <el-table-column
                                    prop="date"
                                    label="日期"
                                    width="180">
                                </el-table-column>
                                <el-table-column prop="address" label="地址">
                                    <template slot-scope="scope">
                                        <el-button type="text" size="small">去整改</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="comon-box">
                    <div class="t">
                        <img src="../assets/images/title-icon.png" alt="">
                        <span class="marginL-1">安全通知</span>
                    </div>
                    <div class="notice-wrap">
                        <div class="items" v-for="(item,index) in 10" :key="index">
                            <div class="t-num" :class="index == 0 ? 't-active1':index == 1?'t-active2':index == 2?'t-active3':'t-num-bg'">{{ index+1 }}</div>
                            <div class="msg">最新通知最新通知最新通知最新通知最新通知最新通知</div>
                            <div class="deta">2021-5-15</div>
                        </div>
                    </div>
                </div>
                <div class="comon-box">
                    <div class="t">
                        <img src="../assets/images/title-icon.png" alt="">
                        <span class="marginL-1">安全咨询</span>
                    </div>
                    <div class="notice-wrap">
                        <div class="items" v-for="(item,index) in 10" :key="index">
                            <div class="t-num" :class="index == 0 ? 't-active1':index == 1?'t-active2':index == 2?'t-active3':'t-num-bg'">{{ index+1 }}</div>
                            <div class="msg">最新通知最新通知最新通知最新通知最新通知最新通知</div>
                            <div class="deta">2021-5-15</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="fiex-bg"></div> -->
    </div>
</template>
<script>
import *as echarts from 'echarts'
export default {
    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '特种设备故障1',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '个人防护',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '危险源整改',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '危险源清单整改',
                address: '上海市普陀区金沙江路 1516 弄'
            },{
                date: '2016-05-03',
                name: '危险源清单整改',
                address: '上海市普陀区金沙江路 1516 弄'
            },{
                date: '2016-05-03',
                name: '危险源清单整改',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
    mounted() {
        this.pieCharts()
        this.pieNestCharts()
        this.pieProgress1()
        this.pieProgress2()
    },
    methods: {
        echartData(xData,yData,keyanCount,kechengCount,xueweicount) {
            var myChart = echarts.init(this.$refs.chartRef);
            myChart.setOption({
                legend: {},
                tooltip: {
                    trigger: 'item'
                },
                grid: {
                    bottom: "10%",
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: xData,
                    axisLabel: { interval: 0, rotate: 30 }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '科研项目',
                        barWidth: 30,
                        data: keyanCount,
                        type: 'bar',
                        stack: 'Ad',
                        itemStyle: {
                            color: '#5470c6'
                        }
                    },
                    {
                        name: '教学课程',
                        barWidth: 30,
                        data: kechengCount,
                        type: 'bar',
                        stack: 'Ad',
                        itemStyle: {
                            color: '#96e172'
                        }
                    },
                    {
                        name: '学位论文及创新实践项目',
                        barWidth: 30,
                        data: xueweicount,
                        type: 'bar',
                        stack: 'Ad',
                        itemStyle: {
                            color: '#de4747'
                        }
                    }
                ]
            });
        },
        pieProgress1() {
            // 图表配置项
            var myChart = echarts.init(this.$refs.chartRef1);
            myChart.setOption({
                // tooltip: {
                //     trigger: "item",
                // },
                series: [{
                    name: "实验室总数",
                    type: "pie",
                    center: ['50%', '50%'],
                    radius: ["55%", "80%"],
                    // avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: "center",
                        formatter: ["{title|总条数}","{num|10,000}"].join("\n"),
                        rich: {
                            title: {
                                padding: [0, 0, 8, 0],
                                color: "#424864",
                            },
                            num: {
                                color: "#424864",
                            },
                        },
                    },
                    labelLine: {
                        show: false,
                    },
                    emphasis: {
                        scale: false,
                    },
                    data: [{
                        value: 1048,
                        name: "学生",
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: "#751b72",
                                    },
                                    {
                                        offset: 1,
                                        color: "#e04efa",
                                    },
                                ]),
                            },
                        },
                    },{ 
                        value: 735,
                        name: "学生1",
                        itemStyle: {color:'#d2d5d8'}
                    }]
                }]
            })
        },
        pieProgress2() {
            // 图表配置项
            var myChart = echarts.init(this.$refs.chartRef2);
            
            myChart.setOption({
                tooltip: {
                    trigger: "item",
                },
                series: [{
                    name: "实验室总数",
                    type: "pie",
                    width: "100%",
                    radius: ["55%", "80%"],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: "center",
                        formatter: ["{title|总条数}","{num|10,000}"].join("\n"),
                        rich: {
                            title: {
                                padding: [0, 0, 8, 0],
                                color: "#424864",
                            },
                            num: {
                                color: "#424864",
                            },
                        },
                    },
                    labelLine: {
                        show: false,
                    },
                    emphasis: {
                        scale: false,
                    },
                    data: [{
                        value: 1048,
                        name: "学生",
                        coordinateSystem: 'polar',
                        roundCap: true,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: "#7282d0",
                                    },
                                    {
                                        offset: 1,
                                        color: "#4e8cfa",
                                    },
                                ]),
                            },
                        },
                    },{ 
                        value: 735,
                        name: "学生1",
                        itemStyle: {color:'#d2d5d8'}
                    }]
                }]
            })
        },
        pieCharts() {
            var myChart = echarts.init(this.$refs.chartRef3);
            myChart.setOption({
                legend: {
                    top: '0',
                    orient: 'vertical',
                    left: 'right'
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        data: [{
                            value: 1048, 
                            name: '未整改',
                            itemStyle: {color:'#f44572'}
                        },{
                            value: 735,
                            name: '已整改',
                            itemStyle: {color:'#11c0ff'}
                        }]
                    }
                ]
            })
        },
        pieNestCharts() {
            var myChart = echarts.init(this.$refs.chartRef4);
            myChart.setOption({
                legend: {
                    top: '5%',
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        type: 'pie',
                        radius: [0, '70%'],
                        selectedMode: 'single',
                        data: [{
                            value: 351, 
                            name: '未整改',
                            itemStyle: {color:'#d2f2ff'},
                            selected: true
                        },{
                            value: 641,
                            name: '已整改',
                            itemStyle: {color:'#00ccff'}
                        }]
                    }
                ]
            })
        },
        initData() {

        }
    }
}
</script>
<style lang="less" scoped>
.page-bg{
    width: 100%;
    background: #f1f2f6;
}
.content-wrapper{
    margin-top: 80px;
    padding: 20px;
}
.header{
    position: fixed;
    top: 0px;
    z-index: 99;
    width: 100%;
    height: 80px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    background: #b2141a;
    box-shadow: 0 0 30px 0 rgba(255, 0, 0, 0.55);
    .logo{
        width: 100%;
        line-height: 80px;
        display: flex;
        h1{
            font-size: 28px;
            font-weight: 600;
            color: #fff;
        }
        p{
            margin-left: 20px;
            font-size: 14px;
            color:#fff;
        }
    }
    /deep/.userInfo{
        color: #fff;
        line-height: 80px;
        .quit-btn{
            cursor: pointer;
        }
    }
}
.wrap-list{
    display: flex;
    justify-content: space-between;
    .wrap-box{
        width: 27.5%;
        height: 490px;
        padding: 20px;
        border: 1px solid #d4d4d4;
        border-radius: 8px;
        background: #fff;
        .items{
            .title{
                display: flex;
                align-items: center;
                margin-bottom: 20px;
                .txt{
                    color: #424242;
                }
            }
        }
    }
    .wrap-sy{
        width: 42.5%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .content{
            width: 48.5%;
            height: 150px;
        }
        .box{
            width: 100%;
            height: 150px;
            display: flex;
            border-radius: 4px;
            box-sizing: border-box;
            .pic{
                width: 100px;
                height: 150px;
                line-height: 170px;
                text-align: center;
                border-radius: 4px;
            }
            .t-info{
                width: 60%;
            }
            .pic-bg1{
                background: rgba(206, 94, 140, 0.5);
            }
            .pic-bg2{
                background: rgba(80, 85, 226, 0.5);
            }
            .pic-bg3{
                background: rgba(227, 135, 84, 0.5);
            }
            .pic-bg4{
                background: rgba(55, 204, 132, 0.5);
            }
            .pic-bg5{
                background: rgba(50, 159, 255, 0.5);
            }
            .pic-bg6{
                background: rgba(40, 105, 231, 0.5);
            }
        }
        .trans-bg1{
            background-image: linear-gradient(
                39deg,
                #f3afbe 0%,
                #de7aa4 50%,
                #a92c60 100%
            );
        }
        .trans-bg2{
            background-image: linear-gradient(
                39deg,
                #6150ff 0%,
                #686dff 50%,
                #6352fc 100%
            );
        }
        .trans-bg3{
            background-image: linear-gradient(
                39deg,
                #f69d5c 0%,
                #feaa7d 50%,
                #e2824d 100%
            );
        }
        .trans-bg4{
            background-image: linear-gradient(
                39deg,
                #29be53 0%,
                #2de085 50%,
                #2eb671 100%
            );
        }
        .trans-bg5{
            background-image: linear-gradient(
                39deg,
                #1b94ff 0%,
                #35b0ff 50%,
                #309eff 100%
            );
        }
        .trans-bg6{
            background-image: linear-gradient(
                39deg,
                #0e61ff 0%,
                #3077ff 50%,
                #1c6aff 100%
            );
        }
    }
    .comon-box{
        width: 32.5%;
        height: 490px;
        padding: 20px;
        border: 1px solid #d4d4d4;
        border-radius: 8px;
        background: #fff;
        .t{
            display: flex;
            align-items: center;
            img{
                width: 15px;
            }
        }
        .tab-count{
            padding: 0 20px;
        }
        .tab-count li{
            width: 40%;
            float: left;
            font-size: 16px;
            text-align: center;
            float: left;
            margin: 0 10px;
            line-height: 50px;
        }
        .tab-count li.active{
            color: #5b7eff;
            border-bottom:1px solid #5b7eff;
        }
        .notice-wrap{
            .items{
                display: flex;
                padding: 12px 0;
                .t-num{
                    width: 20px;
                    height: 20px;
                    text-align: center;
                    line-height: 20px;
                    color: #fff;
                    border-radius: 50%;
                    margin-right: 10px;
                }
                .msg{
                    width: 70%;
                    margin-right: 20px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .t-active1{
                    background: #d42626;
                }
                .t-active2{
                    background: #f87b00;
                }
                .t-active3{
                    background: #bdbf02;
                }
                .t-num-bg{
                    background: #8b8c8c;
                }
            }
        }
    }
}
</style>